<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<ui:composition template="../../template.xhtml">
	<ui:define name="content">
		<h1>Users</h1>
		
		<h:outputStylesheet library="css" name="richfaces.css" />
		
		<h:form>
		<a4j:commandLink action="users_edit" value="Add">
			<f:setPropertyActionListener target="#{usersEditorBean.editedUser}" value="#{null}" />
		</a4j:commandLink>
		<rich:dataTable value="#{usersBean.allUsers}" var="user" iterationStatusVar="it" 
			rowClasses="odd-row, even-row" styleClass="stable" id="tableUsers" width="100%"
			rows="15">
			<rich:column sortBy="#{user.name}" id="name" sortOrder="#{usersSortingBean.nameOrder}">
				<f:facet name="header">
				<a4j:commandLink value="Name" render="tableUsers" action="#{usersSortingBean.sortByRole}" />
				</f:facet>
				<h:outputText value="#{user.name}" />
			</rich:column>
			<rich:column>
				<f:facet name="header">Password</f:facet>
				<h:outputText value="#{user.password}" />
			</rich:column>
			<rich:column sortBy="#{user.role}" id="role" sortOrder="#{usersSortingBean.roleOrder}">
				<f:facet name="header">
				<a4j:commandLink value="Role" render="tableUsers" action="#{usersSortingBean.sortByName}" />
				</f:facet>
				<h:outputText value="#{user.role}" />
			</rich:column>
			<rich:column>
				<f:facet name="header">Actions</f:facet>
				<a4j:commandLink action="users_edit" value="Edit">
					<f:setPropertyActionListener target="#{usersEditorBean.editedUser}" value="#{user}" />
				</a4j:commandLink>
                &nbsp;|&nbsp;
				<a4j:commandLink execute="@this"
                    render="tableUsers" oncomplete="#{rich:component('confirmPane')}.show()"
                    value="Delete">
                    <f:setPropertyActionListener target="#{usersBean.selectedUser}" value="#{user}" />
                </a4j:commandLink>
			</rich:column>
			<f:facet name="footer">
               	<rich:dataScroller page="#{usersBean.page}" rendered="#{usersBean.pager}" />
           	</f:facet>
		</rich:dataTable>
		
		
		<!--  Delete Panel -->
		<h:form>
		<rich:popupPanel id="confirmPane" header="Deleting user" 
    								autosized="true">
	        Are you sure you want to delete selected user?<br />
	        <a4j:commandButton value="Yes" action="#{usersBean.deleteUser}"
	        					render="tableUsers" execute="confirmPane"
	        					oncomplete="#{rich:component('confirmPane')}.hide();" /> 
	        <a4j:commandButton value="No"
	            onclick="#{rich:component('confirmPane')}.hide(); return false;" />
    	</rich:popupPanel>
    	</h:form>
    	<!-- End of Delete Panel -->

		<rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
		<rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />
		<rich:jQuery selector=".stable tr" event="mouseover"
			query="jQuery(this).addClass('active-row')" />
		<rich:jQuery selector=".stable tr" event="mouseout"
			query="jQuery(this).removeClass('active-row')" />
	
		</h:form>
	</ui:define>
</ui:composition>
</html>